
import { useDispatch, useSelector } from 'react-redux'
import numStatus from "@/store/NumStatus"

const View = () => {
  const dispatch = useDispatch();

  // 对数字的操作
  const { num } = useSelector((state: RootState) => ({
    num: state.handleNum.num   // 模块化获取
  }))

  const changeNum = () => {
    // dispatch({type:"字符串(认为是一个记号)",val:3})   type是固定的  val是自定义的
    dispatch({ type: "add1" })
    // dispatch({type:"add2",val:100})   // 触发了reducer函数的执行
  }


  const changeNum2 = () => {
    // 最开始的写法-同步的写法
    dispatch({ type: "add3", val:5 })
  }

  const changeNum3 = () => {
    // 异步的写法- redux-thunk的用法  基本格式：  dispatch(异步执行的函数)
    // dispatch((dis: Function) => {
    //   setTimeout(() => {
    //     dis({ type: "add1"})
    //   }, 1000)
    // })

    // 优化redux-thunk的异步写法  `
    // dispatch(调用状态管理中的asyncAdd1)
    dispatch(numStatus.asyncActions.asyncAdd1)
  }

  // 对sarr的操作
  const { sarr } = useSelector((state: RootState) => ({
    sarr: state.handleArr.sarr
  }))
  // console.log(sarr)
  return (
    <div className='home'>
      <p>这是Page1------页面内容</p>
      {num}
      <button onClick={changeNum}>+1</button>
      <button onClick={changeNum2}>X</button>
      <button onClick={changeNum3}>异步+1</button>
      <p>{sarr}</p>
    </div>
  )
}

export default View